<template>
	<view>
		<uni-nav-bar class="bar_title" shadow left-icon="left" rightText="新增" title="楼层" @clickLeft="handleHomepage()"
			@clickRight="handleAdd()" fixed/>
		<uni-search-bar :focus="true" v-model="queryParams.bdName" @confirm="getList" @blur="getList"
			@cancel="unitCancel" placeholder="请输入楼层名称">
		</uni-search-bar>
		<view class="card-container">
			<view class="card-wrap" v-for="item in unitList" :key="item.id" :class="getStatusClass(item.pushStatus)">
				<view class="card-header">
					<uni-icons type="list" size="20" color="#409EFF"></uni-icons>
					<text class="floor-name">{{item.floorName}}</text>
					<view class="status-badge" :class="'status-'+item.pushStatus">
						{{getPushStatus(item.pushStatus)}}
					</view>
				</view>
				
				<view class="card-content">
					<view class="info-item">
						<uni-icons type="home" size="16" color="#666"></uni-icons>
						<text class="info-text">建筑物：{{item.building.bdName}}</text>
					</view>
					
					<view class="action-row">
						<view class="status-text">
							<uni-icons type="notification" size="16" :color="getStatusColor(item.pushStatus)"></uni-icons>
							<text :style="{color: getStatusColor(item.pushStatus)}">推送状态：{{ getPushStatus(item.pushStatus) }}</text>
						</view>
						<view v-if="item.pushStatus != '2'" class="sync-btn" @click="handleSort(item.id)">
							<uni-icons type="refresh" size="14" color="#fff"></uni-icons>
							<text>推送</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分页组件 -->
		<uni-pagination :current="queryParams.pageNum" :page-size="queryParams.pageSize" :total="total"
			@change="handlePageChange" :show-icon="true" />
	</view>
</template>

<script>
	import {listFloor, getFloor, delFloor, addFloor, updateFloor, floorPush} from "@/api/system/floor"
	export default {
		props: {
			item: {
				type: Object,
				default: () => null
			},
		},
		data() {
			return {
				unitList: [],
				customMaintenanceUnitList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0, // 总条数
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				listFloor(this.queryParams).then(response => {
					this.unitList = response.rows
					this.total = response.total
				})
			},
			unitCancel() {
				listFloor({
					pageNum: 1,
					pageSize: 10
				}).then(response => {
					this.unitList = response.rows
					this.total = response.total
				})
			},
			// 分页变化
			handlePageChange(e) {
				this.queryParams.pageNum = e.current
				this.getList()
			},
			getStatusClass(status) {
				if (status == '0') {
					return 'status-warning'
				} else if (status == '1') {
					return 'status-error'
				} else if (status == '2') {
					return 'status-success'
				}
			},
			getStatusColor(status) {
				if (status == '0') {
					return '#e6a23c'
				} else if (status == '1') {
					return '#f56c6c'
				} else if (status == '2') {
					return '#67c23a'
				}
				return '#666'
			},
			handleHomepage() {
				uni.reLaunch({
					url: '/pages/index'
				});
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pages/system/floor/floorAdd'
				});
			},
			getPushStatus(val) {
				if (val == '0') {
					return '未推送'
				} else if (val == '1') {
					return '推送失败'
				} else if (val == '2') {
					return '推送成功'
				} else {
					return ''
				}
			},
			handleSort(id) {
				floorPush(id).then(response => {
					this.$modal.msgSuccess("推送成功！")
					this.getList()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar_title {
		font-weight: bold;
	}

	.card-container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f7f8fa;
		
		.card-wrap {
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 24rpx;
			transition: all 0.3s ease;
			border-left: 8rpx solid #ddd;
			
			&:active {
				transform: translateY(-2rpx);
				box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
			}
			
			&.status-success {
				border-left-color: #67c23a;
				.status-badge {
					background-color: #67c23a;
				}
			}
			
			&.status-warning {
				border-left-color: #e6a23c;
				.status-badge {
					background-color: #e6a23c;
				}
			}
			
			&.status-error {
				border-left-color: #f56c6c;
				.status-badge {
					background-color: #f56c6c;
				}
			}
			
			.card-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid #f1f1f1;
				
				.floor-name {
					font-size: 34rpx;
					font-weight: bold;
					color: #333;
					margin-left: 10rpx;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.status-badge {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					color: white;
					
					&.status-0 {
						background-color: #e6a23c;
					}
					&.status-1 {
						background-color: #f56c6c;
					}
					&.status-2 {
						background-color: #67c23a;
					}
				}
			}
			
			.card-content {
				.info-item {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: #666;
					
					.info-text {
						margin-left: 8rpx;
					}
				}
				
				.action-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 12rpx;
					border-top: 1rpx dashed #eee;
					
					.status-text {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						
						text {
							margin-left: 8rpx;
						}
					}
					
					.sync-btn {
						display: flex;
						align-items: center;
						padding: 8rpx 24rpx;
						border-radius: 30rpx;
						background-color: #409eff;
						color: white;
						font-size: 26rpx;
						
						text {
							margin-left: 6rpx;
						}
					}
				}
			}
		}
	}
</style>